 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>IDX Browser</title>
	<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'/>
	<style type="text/css">
	
	body,html
	{
		height: 100%;
		margin: 0px;
		overflow : hidden;		
		
		background-color : #666;
		
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: moz-none;
		-ms-user-select: none;
		user-select: none;
	}

	div#explorer
	{
		background-color : #444;
		
		width: 100%;
		margin: 0px;
		overflow : hidden;
		left : 0;
		top : 0;
		position : absolute;
	}
	
	div.batch
	{
		width: 100%;
		margin: 0px;
		border: 0px;
	}
	
	.tile
	{
		display: inline-block;
	}
	
	img.tile
	{
		border-style: dotted;
		border-color: #BBB;
		border-width: 1px;
		margin-left: 2px;
		margin-right: 2px;
		margin-top: 1px;
		margin-bottom: 1px;
	}
	
	div.tile
	{
		vertical-align: top;
		margin: 3px;
		text-align: center;
		font-family: 'Inconsolata', sans-serif;
		color: white;
	}
	
	
</style>
	
 
</head>
<body>
	<input type="file" id="files" name="files[]" multiple=""/>
	<div id="explorer"/>
	
	<script src="IDX.js"></script>
	<script src="IDXExplorer.js"></script>
	<script type="text/javascript">
	<![CDATA[

	explorer = null;

	function handleFileSelect(evt) 
	{
		var file = evt.target.files[0]; // FileList object

		new IDX(file, function (in_idx)
		{
			explorer = new IDXExplorer(document.getElementById("explorer"), in_idx);
		});
	}

	document.getElementById('files').addEventListener('change', handleFileSelect);
	]]>
	</script>
</body>
</html>